<template>
    <div class="snow-page">
        <div class="box-title">
            <div>图标管理</div>
        </div>
        <a-card :bordered="false" :style="{ width: '100%' }">
            <a-card-grid v-for="(item, index) in iconList" :key="index" hoverable
                :style="{ width: '150px', margin: '15px' }">
                <a-card class="card-demo" bordered>
                    <div :style="{ height: '120px' }">
                        <div style="text-align: center;margin-top: 10px;">
                            <div style="margin-top: 10px;height: 40px;">单位名称:{{ item.name }}</div>
                            <img :src="item.url" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <a-upload :custom-request="customRequest" @change="handleChange(item.id)"
                                :show-file-list="false">
                                <template #upload-button>
                                    <a-space style="margin-top: 10px;">
                                        <a-button size="small">
                                            <template #icon>
                                                <icon-upload />
                                            </template>
                                            上传图片</a-button>
                                    </a-space>
                                </template>
                            </a-upload>
                        </div>
                    </div>
                </a-card>
            </a-card-grid>
        </a-card>

    </div>
</template>

<script setup lang="ts">
import { Message, Modal } from "@arco-design/web-vue";
import { onMounted, ref } from "vue";
import { getDictBycodeAPI } from "@/api/modules/dictionary/index";

const iconList = ref([])

onMounted(() => {
    init()
})

const uploadId = ref("")

const customRequest = (options: any) => {
    const { onProgress, onError, fileItem } = options;
    console.log(fileItem);

    // 创建 FormData 对象，用于发送文件和额外参数
    const formData = new FormData();
    formData.append('file', fileItem.file);
    formData.append('id', uploadId.value);

    // 模拟上传过程
    const xhr = new XMLHttpRequest();
    xhr.upload.onprogress = (event) => {
        if (event.total > 0) {
            const percent = (event.loaded / event.total) * 100;
            onProgress(percent, event);
        }
    };

    xhr.onload = () => {
        if (xhr.status === 200) {
            // Message.success(`文件 ${fileItem.file.name} 上传成功`);
            Modal.warning({
                title: "提示",
                content: `文件 ${fileItem.file.name} 上传成功由于存在缓存，请多次刷新页面`,
                hideCancel: true,
                closable: true,
                maskClosable: false,
                onOk: async () => {
                    try {
                        init();
                    } catch { }
                }
            });
        } else {
            onError({ status: xhr.status });
            Message.error(`文件 ${fileItem.file.name} 上传失败`);

        }


    };

    xhr.onerror = () => {
        onError({ status: xhr.status });
        Message.error(`文件 ${fileItem.file.name} 上传失败`);
    };

    // 模拟发送请求
    xhr.open('POST', '/api/service/minio/upload', true);
    xhr.send(formData);

    // 返回一个取消上传的函数
    return () => {
        xhr.abort();
    };
};

async function init() {
    let res = await getDictBycodeAPI(20)
    if (res.status == 2) {
        iconList.value = res.data
    }
}
const handleChange = (id: any) => {
    uploadId.value = id;
};
</script>

<style lang="scss" scoped></style>